<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.header {
				padding-top: 40px;
				padding-bottom: 10px;
				background-color: #fff;
				text-align: center;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 9999;
			}

			.main {
				padding-top: 71px;
			}

			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.left-content {
				display: flex;
				align-items: center;
			}

			.left-content .name {
				font-weight: 500;
				margin-right: 10px;
			}

			.left-content .tags {
				display: flex;
				align-items: center;
			}

			.left-content .tags .tag-item {
				color: #f55148;
				border-radius: 4px;
				border: 1px solid #a04743;
				font-size: 12px;
				padding: 0 2px;
			}

			.shop {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 4px;
			}

			.shop-item {
				background-color: #fff;
				overflow: hidden;
			}

			.shop-item img {
				width: 100%;
				height: 120px;
			}

			.shop-item .info {
				padding: 10px;
			}

			.shop-item .info .title {
				font-size: 16px;
			}

			.shop-item .info .price {
				font-weight: 700;
				font-size: 16px;
				color: #e44f48;
			}

			.shop-item .info span {
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<header class="header">
			聊天
		</header>
		<div class="main">
			<!-- 消息列表 -->
			<ul id="list1" class="mui-table-view" style="margin-bottom: 10px;">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" style="display: flex;align-items: center;">
						<img class="mui-media-object mui-pull-left" src="images/cbd.jpg"
							style="width: 50px;height: 50px;border-radius: 50%;max-width: 50px;">
						<div class="mui-media-body" style="flex: auto;">
							<div class="content">
								<div class="left">
									<div class="left-content">
										<div class="name">幸福</div>
										<div class="tags">
											<div class="tag-item">
												官方
											</div>
										</div>
									</div>
									<p class="desc mui-ellipsis">123</p>
								</div>
								<div class="right">
									<p class="time">18:00</p>
									<span class="mui-badge mui-badge-danger">45</span>
								</div>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" style="display: flex;align-items: center;">
						<img class="mui-media-object mui-pull-left" src="images/cbd.jpg"
							style="width: 50px;height: 50px;border-radius: 50%;max-width: 50px;">
						<div class="mui-media-body" style="flex: auto;">
							<div class="content">
								<div class="left">
									<div class="left-content">
										<div class="name">幸福</div>
										<div class="tags">
											<div class="tag-item">
												官方
											</div>
										</div>
									</div>
									<p class="desc mui-ellipsis">123</p>
								</div>
								<div class="right">
									<p class="time">18:00</p>
									<span class="mui-badge mui-badge-danger">45</span>
								</div>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" style="display: flex;align-items: center;">
						<img class="mui-media-object mui-pull-left" src="images/cbd.jpg"
							style="width: 50px;height: 50px;border-radius: 50%;max-width: 50px;">
						<div class="mui-media-body" style="flex: auto;">
							<div class="content">
								<div class="left">
									<div class="left-content">
										<div class="name">幸福</div>
										<div class="tags">
											<div class="tag-item">
												官方
											</div>
										</div>
									</div>
									<p class="desc mui-ellipsis">123</p>
								</div>
								<div class="right">
									<p class="time">18:00</p>
									<span class="mui-badge mui-badge-danger">45</span>
								</div>
							</div>
						</div>
					</a>
				</li>

				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">一周以前的消息</a>
						<div class="mui-collapse-content" style="padding-top: 0;">
							<ul id="list1" class="mui-table-view" style="margin-bottom: 10px;">
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;" style="display: flex;align-items: center;">
										<img class="mui-media-object mui-pull-left" src="images/cbd.jpg"
											style="width: 50px;height: 50px;border-radius: 50%;max-width: 50px;">
										<div class="mui-media-body" style="flex: auto;">
											<div class="content">
												<div class="left">
													<div class="left-content">
														<div class="name">幸福</div>
														<div class="tags">
															<div class="tag-item">
																官方
															</div>
														</div>
													</div>
													<p class="desc mui-ellipsis">123</p>
												</div>
												<div class="right">
													<p class="time">18:00</p>
													<span class="mui-badge mui-badge-danger">45</span>
												</div>
											</div>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;" style="display: flex;align-items: center;">
										<img class="mui-media-object mui-pull-left" src="images/cbd.jpg"
											style="width: 50px;height: 50px;border-radius: 50%;max-width: 50px;">
										<div class="mui-media-body" style="flex: auto;">
											<div class="content">
												<div class="left">
													<div class="left-content">
														<div class="name">幸福</div>
														<div class="tags">
															<div class="tag-item">
																官方
															</div>
														</div>
													</div>
													<p class="desc mui-ellipsis">123</p>
												</div>
												<div class="right">
													<p class="time">18:00</p>
													<span class="mui-badge mui-badge-danger">45</span>
												</div>
											</div>
										</div>
									</a>
								</li>

							</ul>
						</div>
					</li>
				</ul>
			</ul>
			<!-- 商品列表 -->
			<div class="shop">
				<div class="shop-item">
					<img src="images/cbd.jpg" alt="" />
					<div class="info">
						<div class="title">标题</div>
						<p class="desc">7天无理由退货</p>
						<div class="price">
							￥<span>258</span>
						</div>
					</div>
				</div>
				<div class="shop-item">
					<img src="images/cbd.jpg" alt="" />
					<div class="info">
						<div class="title">标题</div>
						<p class="desc">7天无理由退货</p>
						<div class="price">
							￥<span>258</span>
						</div>
					</div>
				</div>
				<div class="shop-item">
					<img src="images/cbd.jpg" alt="" />
					<div class="info">
						<div class="title">标题</div>
						<p class="desc">7天无理由退货</p>
						<div class="price">
							￥<span>258</span>
						</div>
					</div>
				</div>
				<div class="shop-item">
					<img src="images/cbd.jpg" alt="" />
					<div class="info">
						<div class="title">标题</div>
						<p class="desc">7天无理由退货</p>
						<div class="price">
							￥<span>258</span>
						</div>
					</div>
				</div>
			</div>

		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>